<template>
  <div>
    <div class="nav">
      <div class="wrapper">
        <div class="wrapper-top">
          <div class="title"> <span class="title-c">
            长期合作伙伴
          </span></div>
          <div class="content"><span class="content-c">
              我们以诚信、共赢、开创的经营理念,与全国数百家公立/三甲/专业体检中心建立的长期合作伙伴关系，为您创造良好的体检环境，完善的技术，和周到的预约服务
          </span></div>
        </div>
        <div  class="wrapper-bottom">
          <div class="bottom-w" >
            <img  v-for="gg of buddyimg" :src="gg.imgUrl" alt="" />

          </div>

        </div>
      </div>
    </div>
    <div class="other">
      <div class="wrapper">
        <div class="wrapper-top">
          <div class="title"> <span class="title-c">
            我们的承诺
          </span></div>
          <div class="content"><span class="content-c">
              我们可以提供体检预约，报告解读，健康管理等服务。我们推崇"踏实、拼搏、责任"的企业精神，为您从检前到检后提供优质的服务，并作出以下承诺，让您放心预约
          </span></div>
        </div>
        <div  class="wrapper-bottom ">
          <div class="bottom-w on" >
            <div class="last" v-for="ss of commited">
              <img :src="ss.imgUrl" alt="" />
              <span>{{ss.dec}}</span>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>

</template>

<script>
  export default {
    name: 'VBuddy',
    data () {
      return {
        buddyimg:[{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },{
          imgUrl:require('../assets/images2/10.png')
        },
        ],
        commited:[
          {
            imgUrl:require('../assets/images2/p10.png'),
            dec:"官方授权"
          },{
            imgUrl:require('../assets/images2/p11.png'),
            dec:"诚信认证"
          },{
            imgUrl:require('../assets/images2/p12.png'),
            dec:"低价承诺"
          },{
            imgUrl:require('../assets/images2/p13.png'),
            dec:"检后服务"
          },{
            imgUrl:require('../assets/images2/p14.png'),
            dec:"100%满意"
          },{
            imgUrl:require('../assets/images2/p15.png'),
            dec:"90天退换"
          },
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav{
  width:100%;
  height: 610px;
  background: rgba(241,241,241);
  border-top:1px solid rgba(241,241,241);
}
  .wrapper{

    width:80%;
    margin: 0 auto;
    height: 90%;
    margin-top:30px;
  }
  .wrapper-top{
    height: 40%;
    width: 100%;
  }
  .wrapper-bottom{

    height: 60%;
    width: 100%;

  }
  span{
    display: inline-block;
    margin:0 auto;
    width:100%;
    color:rgba(101,101,101);
    text-align: center;
    line-height: 42px;
  }
  .title{
    height: 50%;
    width: 100%;
    font-size: 22px;
    position: relative;
  }
  .title-c{
    position: absolute;
    margin:0px 0px 0px 0px;
    bottom:30px;
    font-size: 30px;

  }
  .content{
    height: 50%;
    width:100%;
    position: relative;
    overflow: hidden;
  }
  .content-c{
    width:54%;
    margin: 0 auto;
    position: absolute;
    left:22%;
    line-height: 27px;
  }
  .bottom-w{
    height: 80%;
    margin:0 auto;
    text-align: center;
  }
  img{
    margin-right:5px;
    margin-top:5px;
    width: 13%;
  }
  .on{
    display: flex;
    justify-content: space-between;

  }
  .other{
    width: 80%;
    height: 480px;
    margin:0 auto;
  }
  .last{
    height: 100%;
    width:16%;
  }
  .last>img{
    width: 90%;
  }

</style>
